<template>
  <view class="waterfall-container">
      <view
        class="waterfall-column" 
        v-for="(col, index) in columns" 
        :key="index"
        :style="{width: columnWidth + 'px', marginLeft: index !== 0 ? gap + 'px' : 0}"
      >
        <view 
          class="waterfall-item" 
          v-for="item in col" 
          :key="item.id"
          @mouseover="showTitle(item)"
          @mouseleave="hideTitle(item)"
        >
          <image 
            class="item-image" 
			v-if="item.type=='video'"
            :src="item.webp_static_url" 
			@click="previewImage(item)"
            mode="aspectFill"
            :style="{height: item.size.split('*')[1]/3.5 + 'px'}"
          />
		  <image
		    class="item-image" 
		  	v-if="item.type=='image'"
		    :src="item.video_url" 
			@click="previewImage(item)"
		    mode="aspectFill"
		    :style="{height: item.size.split('*')[1]/6 + 'px'}"
		  />
          <view 
            class="title-mask"
            :class="{ 'mask-visible': item.showTitle }"
          >
            <text class="title-text">{{ item.content }}</text>
          </view>
        </view>
      </view>
	  
	  
	  <!--预览图片和视频弹窗-->
	  <uni-popup ref="imgPopup" type="center">
	  	<view class="img-popup-box left clearfix">
	  		<view class="img-pop-title left clearfix">
	  			<view class="img-pop-title-left left">
	  				预览
	  			</view>
	  			<view class="img-pop-title-right right"  @click="this.$refs.imgPopup.close()">
	  				<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
	  			</view>
	  		</view>
	  		
	  		<view class="img-pop-content left clearfix" v-if="itemType=='image'">
	  			<image :src="previewImageUrl" mode="aspectFit" style="width:100%;height:100%;border-radius: 5px;"></image>
	  		</view>
	  		
	  		<view class="img-pop-content left clearfix" v-if="itemType=='video'">
	  			<video :autoplay="true" :loop="true" :src="previewImageUrl" mode="aspectFit" style="width:100%;height:100%;border-radius: 5px;"></video>
	  		</view>
	  		
	  		<view class="im-pop-close-button right">
	  			<view class="im-pop-button right">
	  				创作相似
	  			</view>
	  			<view class="im-pop-button2 right" @click="this.$refs.imgPopup.close()">
	  				取消
	  			</view>
	  		</view>
	  	</view>
	  </uni-popup>
	  
	  
    </view>
</template>

<script>
import { calculateLayout } from './lib.js'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns: [],
      columnWidth: 200,
      gap: 10,
	  itemType:'',
	  previewImageUrl:null
    }
  },
  watch: {
    list: {
      handler() {
        this.calculateColumns()
      },
      deep: true
    }
  },
  mounted() {
    this.calculateColumns()
    window.addEventListener('resize', this.calculateColumns)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateColumns)
  },
  methods: {
	//预览图片
	previewImage(item){
		console.log('type',item.type);
		this.itemType = item.type;
		this.previewImageUrl = item.video_url;
		this.$refs.imgPopup.open();
	},
	showTitle(item) {
	    item.showTitle = true
		this.$forceUpdate()
	},
	hideTitle(item) {
		item.showTitle = false
		this.$forceUpdate()
	},
    calculateColumns() {
      const containerWidth = this.$el.clientWidth
      const { columns, columnWidth, gap } = calculateLayout(containerWidth, this.list, 6)
      this.columns = columns
      this.columnWidth = columnWidth
      this.gap = gap
    },
    toggleTitle(item) {
      item.showTitle = !item.showTitle
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.im-pop-button2{width:80px;height:35px;border:1px solid #ddd;line-height:35px;font-size:13px;color:#333;text-align: center;border-radius: 5px;margin-top:7.5px;cursor:pointer;}
	.im-pop-button{width:90px;height:35px;background:#2979ff;line-height:35px;font-size:13px;color:#fff;text-align: center;border-radius: 5px;margin-top:7.5px;cursor:pointer;margin-left:20px;}
	.img-pop-content image{border-radius: 5px;}
	.im-pop-close-button{width:90%;height:50px;line-height:50px;margin-right:2%;margin-top:30px;text-align: center;}
	.img-pop-content{width:96%;height:500px;margin-left:2%;margin-top:30px;background:#efefef;}
	.img-pop-title-right{margin-right:10px;margin-top:5px;cursor:pointer;}
	.img-pop-title-left{line-height:40px;font-size:16px;margin-left:20px;}
	.img-pop-title{width:100%;height:40px;margin-top:5px;}
	.img-popup-box{width:950px;height:680px;background:#fff;border-radius: 12px;}
.waterfall-container {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  margin-top:30px;
}

.waterfall-column {
  display: inline-block;
  vertical-align: top;
}

.waterfall-item {
  position: relative;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.item-image {
  width: 100%;
  display: block;
}

.title-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3);
  padding: 8px 12px;
  z-index:9999;
  transform: translateY(100%);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: 100px; /* 根据内容自动调整 */
}

.mask-visible {
  transform: translateY(0);
  bottom: 0px;
}

.title-text {
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  display: block;
  word-break: break-word;
}
</style>